---
layout: typedoc
title: '@msrvida/sanddance-react'
---
<header>
<div class="tsd-page-title">
	<div class="typedoc-container">
	</div>
</div>
</header>
<div class="container container-main">
<div class="row">
	<div class="col-8 col-content">
		<div class="tsd-panel tsd-typography">
			<a href="#msrvidasanddance-react" id="msrvidasanddance-react" style="color: inherit; text-decoration: none;">
				<h1>@msrvida/sanddance-react</h1>
			</a>
			<p>Visually explore, understand, and present your data.</p>
			<p><img src="https://user-images.githubusercontent.com/11507384/54236654-52d42800-44d1-11e9-859e-6c5d297a46d2.gif" alt="sanddance-animation"></p>
			<p><a href="https://microsoft.github.io/SandDance/app">Demo</a> - <a href="https://microsoft.github.io/SandDance/docs/sanddance-react/v3">API Reference</a></p>
			<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
				<h2>Installation</h2>
			</a>
			<p>Add these to the <code>dependencies</code> section of your <code>package.json</code>, then run <code>npm install</code>:</p>
			<pre><code class="language-json"><span style="color: #A31515">&quot;@deck.gl/core&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^8.3.7&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;@deck.gl/layers&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^8.3.7&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;@msrvida/sanddance-react&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^3&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;@luma.gl/core&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^8.3.1&quot;</span><span style="color: #000000">,</span>
<span style="color: #A31515">&quot;vega&quot;</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;^5.17.0&quot;</span>
</code></pre>
			<p>Import these in your JavaScript:</p>
			<pre><code class="language-js"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">deck</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@deck.gl/core&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">layers</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@deck.gl/layers&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">luma</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@luma.gl/core&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">vega</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;vega&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react&#039;</span><span style="color: #000000">;</span>
<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">ReactDOM</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react-dom&#039;</span><span style="color: #000000">;</span>

<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">use</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">SandDanceUse</span><span style="color: #000000">, </span><span style="color: #001080">SandDanceReact</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@msrvida/sanddance-react&#039;</span><span style="color: #000000">;</span>

<span style="color: #795E26">SandDanceUse</span><span style="color: #000000">(</span><span style="color: #001080">React</span><span style="color: #000000">, </span><span style="color: #001080">ReactDOM</span><span style="color: #000000">, </span><span style="color: #001080">vega</span><span style="color: #000000">, </span><span style="color: #001080">deck</span><span style="color: #000000">, </span><span style="color: #001080">layers</span><span style="color: #000000">, </span><span style="color: #001080">luma</span><span style="color: #000000">);</span>
</code></pre>
			<a href="#for-more-information" id="for-more-information" style="color: inherit; text-decoration: none;">
				<h2>For more information</h2>
			</a>
			<p>Please visit the <a href="https://microsoft.github.io/SandDance/">SandDance website</a>.</p>
		</div>
	</div>
	<div class="col-4 col-menu menu-highlight">
		<nav class="tsd-navigation primary">
			<ul>
				<li class=" ">
					<a href="modules.html">Exports</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/sanddance.html">Sand<wbr>Dance</a>
				</li>
				<li class=" tsd-kind-namespace">
					<a href="modules/util.html">util</a>
				</li>
			</ul>
		</nav>
		<nav class="tsd-navigation secondary">
			<ul class="before-current">
				<li class=" tsd-kind-interface">
					<a href="interfaces/props.html" class="tsd-kind-icon">Props</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#sanddancereact" class="tsd-kind-icon">Sand<wbr>Dance<wbr>React</a>
				</li>
				<li class=" tsd-kind-variable">
					<a href="modules.html#version" class="tsd-kind-icon">version</a>
				</li>
				<li class=" tsd-kind-function">
					<a href="modules.html#use" class="tsd-kind-icon">use</a>
				</li>
			</ul>
		</nav>
	</div>
</div>
</div>
<div class="overlay"></div>